<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { loginByCaptchaAPI, loginByPwdAPI, getCaptchaAPI } from '@/apis/user'
import { useUserStore } from '@/stores/userStore'

// 登录方式
let loginType = ref(0) // 0-验证码登录，1-密码登录

// 获取登录方式tab
let tabRef1 = ref(null)
let tabRef2 = ref(null)
// 登录方式切换
let loginTypeChange = (type) => {
    loginType.value = type
    if (type === 0) {
        tabRef1.value.classList.add('SignFlow-tab-active')
        tabRef2.value.classList.remove('SignFlow-tab-active')
    }
    else {
        tabRef2.value.classList.add('SignFlow-tab-active')
        tabRef1.value.classList.remove('SignFlow-tab-active')
    }
}

let btnDisabled = false // 按钮是否被禁用
let taskId = null
// 按钮禁用
let captchaBtnRef = ref(null)
let disabledBn = () => {
    captchaBtnRef.value.disabled = true
    captchaBtnRef.value.style.cursor = 'no-drop'
    btnDisabled = true
    // 禁用倒计时
    let time = 60
    captchaBtnRef.value.textContent = (time--) + '秒后可重发'
    taskId = setInterval(() => captchaBtnRef.value.textContent = (time--) + '秒后可重发', 1000)
    setTimeout(() => {
        captchaBtnRef.value.disabled = false
        captchaBtnRef.value.style.cursor = 'pointer'
        clearInterval(taskId)
        taskId = null
        captchaBtnRef.value.textContent = '获取短信验证码'
        btnDisabled = false
    }, 59000)
}

onBeforeUnmount(() => {
    if (taskId) {
        clearInterval(taskId)
    }
})

// 用户输入信息
let phone = ref('15300000001')
let code = ref('')
let password = ref('123456')

// 获取验证码
let getCaptcha = async () => {
    if (phone.value != '') {
        if (!btnDisabled) {
            // 禁用按钮
            disabledBn()
            // 发送验证码
            const res = await getCaptchaAPI(phone.value)
            if (res.code === 2000) {
                ElMessage({ type: 'success', message: '验证码已发送' })
            }
        }
    }
    else {
        ElMessage({ type: 'warning', message: '手机号不能为空' })
    }
}

// 登录
const router = useRouter()
const userStore = useUserStore()
let doLogin = async () => {
    console.log(`登录方式-${loginType.value === 0 ? '验证码登录' : '密码登录'}`)
    let res = null
    if (loginType.value === 0) { // 验证码登录
        if (phone.value != '' && code.value != '') {
            res = await loginByCaptchaAPI({phone: phone.value, code: code.value})
        }
        else {
            ElMessage({ type: 'warning', message: '输入不能为空' })
        }
    }
    else if (loginType.value === 1) { // 密码登录
        if (phone.value != '' && password.value != '') {
            res = await loginByPwdAPI({phone: phone.value, password: password.value})
        }
        else {
            ElMessage({ type: 'warning', message: '输入不能为空' })
        }
    }
    console.log(res)
    if (res != null && res.code === 2000) { // 登录成功，获取用户信息
        userStore.token = res.data.token
        userStore.getUserInfo()
        ElMessage({ type: 'success', message: '登录成功' })
        // 跳转至首页
        router.replace({ path: '/' })
    }
}
</script>

<template>
<div id="app">
    <div class="loginForm-container">
        <div class="loginForm-container-l">
            <div class="Qr-tip">
                <div>融销通</div>
                <div>农产品融销一体平台</div>
            </div>
            <div class="Qr-img">
                <RouterLink to="/"><img src="@/assets/img/logo.png" alt=""></RouterLink>
            </div>
            <div class="Qr-nav">
                <a href="#">下载融销通</a>
                <a href="#">无障碍模式</a>
            </div>
        </div>
        <div class="loginForm-container-r">
            <div class="SignFlow-tabs">
                <div ref="tabRef1" class="SignFlow-tab SignFlow-tab-active" @click="loginTypeChange(0)">验证码登录</div>
                <div ref="tabRef2" class="SignFlow-tab" @click="loginTypeChange(1)">密码登录</div>
            </div>
            <div class="SignFlow-container">
                <div class="captcha-form" v-show="loginType === 0">
                    <div class="ipt-field">
                        <input class="ipt" type="text" name="phone" placeholder="请输入手机号" v-model="phone">
                    </div>
                    <div class="ipt-field" style="position: relative;">
                        <input class="ipt" type="text" name="captcha" placeholder="请输入短信验证码" v-model="code">
                        <a id="captcha-btn" ref="captchaBtnRef" @click="getCaptcha">获取短信验证码</a>
                    </div>
                    <div class="login-options">未注册手机号验证后自动完成注册</div>
                    <button type="button" class="form-btn" @click="doLogin">登录/注册</button>
                </div>
                <div class="password-form" v-show="loginType === 1">
                    <div class="ipt-field">
                        <input class="ipt" type="text" name="phone" placeholder="请输入手机号" v-model="phone">
                    </div>
                    <div class="ipt-field">
                        <input class="ipt" type="password" name="password" placeholder="请输入密码" v-model="password">
                    </div>
                    <div class="login-options"><RouterLink to="forgetPwd">忘记密码？</RouterLink></div>
                    <button type="button" class="form-btn" @click="doLogin">登录</button>
                </div>
            </div>
            <div class="split-container">
                <div class="line"></div>
                <div class="split-txt">其他方式登录</div>
                <div class="line"></div>
            </div>
            <div class="Login-socialLogin">
                <a href="#"><i class="iconfont icon-QQ" style="color: #50c8fd;"></i></a>
                <a href="#"><i class="iconfont icon-wechat" style="color: #07c160;"></i></a>
                <a href="#"><i class="iconfont icon-github" style="color: #24292e;"></i></a>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped lang='scss'>
#app {
    width: 100%;
    height: 100vh;
    background-color: #b8e5f8;
    background-image: url('@/assets/img/rice.png');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    $container-w: 720px;

    .loginForm-container {
        display: flex;
        width: $container-w;
        height: 500px;
        background-color: #fff;
        margin: 0 auto;
        margin-top: 160px;
        border-radius: 5px;

        .loginForm-container-l {
            width: 320px;
            padding: 100px 30px;
            user-select: none;

            .Qr-tip {
                text-align: center;

                div:first-child {
                    font-weight: bold;
                }

                div:last-child {
                    font-size: 14px;
                    margin: 8px 0 24px;
                }
            }

            .Qr-img {
                $QrSize: 135px;
                width: $QrSize;
                height: $QrSize;
                margin: 0 auto;
                text-align: center;
                line-height: $QrSize;
                border-radius: 6px;

                img {
                    width: $QrSize - 20;
                }
            }

            .Qr-nav {
                display: flex;
                justify-content: center;
                margin-top: 50px;

                a {
                    display: block;
                    width: 90px;
                    height: 30px;
                    margin: 0 5px;
                    font-size: 12px;
                    text-align: center;
                    line-height: 30px;
                    border: 1px solid #ebebeb;
                    border-radius: 30px;

                    &:hover {
                        background-color: #f6f6f6;
                    }
                }
            }
        }

        .loginForm-container-r {
            width: 400px;
            border-left: 1px solid #ebebeb;
            padding: 0 24px;

            .SignFlow-tabs {
                display: flex;
                height: 50px;
                margin-top: 16px;
                line-height: 50px;
                text-align: center;

                .SignFlow-tab {
                    margin-right: 24px;
                    cursor: pointer;
                }

                .SignFlow-tab-active {
                    font-weight: bold;
                    border-bottom: $btnMainCol 3px solid;
                }
            }

            .SignFlow-container {
                width: 100%;
                height: 270px;
                margin-top: 24px;

                .ipt-field {
                    width: 100%;
                    height: 45px;
                    margin: 12px 0;
                    border-bottom: 1px solid #ebebeb;

                    .ipt {
                        height: 44px;
                        width: 100%;
                        font-size: 14px;
                    }

                    #captcha-btn {
                        position: absolute;
                        display: block;
                        font-size: 14px;
                        right: 0;
                        top: 11px;
                        color: $btnMainCol;
                        user-select: none;

                        &:hover {
                            color: #76839b;
                        }
                    }
                }

                .login-options {
                    width: 100%;
                    height: 20px;
                    margin-top: 25px;
                    font-size: 14px;
                    text-align: right;
                    color: #444;
                }

                .form-btn {
                    width: 100%;
                    height: 35px;
                    margin: 30px 0;
                    border: none;
                    border-radius: 3px;
                    cursor: pointer;
                    font-size: 14px;
                    color: #fff;
                    background-color: $btnMainCol;

                    &:hover {
                        background-color: $btnMainHoverCol;
                    }
                }
            }

            .split-container {
                display: flex;
                height: 17px;
                justify-content: space-between;

                .line {
                    border-top: 1px solid;
                    border-color: #ebebeb;
                    width: 124px;
                    height: 0;
                    align-self: center;
                }

                .split-txt {
                    color: #999999;
                    font-size: 12px;
                }
            }

            .Login-socialLogin {
                display: flex;
                height: 60px;
                margin: 12px 74px;
                justify-content: space-between;
                align-items: center;

                a {
                    display: block;
                    width: 35px;
                    height: 35px;
                    text-align: center;
                    line-height: 35px;
                    border-radius: 35px;
                    background-color: #f6f6f6;
                    
                    i {
                        font-size: 25px;
                    }
                }
            }
        }
    }
}
</style>
